<template>
  <div class="mine">
    <div class="img1">
      <img :src="require('/src/assets/img/img1.jpg')" alt="" />
      <span>上海出发</span>
    </div>
    <div class="wenb">
      【建筑可阅读】春秋微游永不拓宽的上海马路之武康路半日微游●那一缕蚀骨的风情
      打卡网红地标武康庭
    </div>
    <div class="ding">
      <div>￥<span>49</span>起</div>
      <span>立即预定</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.mine {
  width: calc((100% - 45px) / 2);
  background-color: #fff;
  padding: 6px;
  margin: 5px 3px;

  .img1 {
    position: relative;
    > img {
      width: 100%;
      display: block;
    }
    span {
      background-color: #3d4246;
      position: absolute;
      left: 5px;
      top: 5px;
      border-radius: 6px;
      padding: 1px 5px;
      color: #ffffff;
      font-size: 13px;
    }
  }
  .wenb {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    font-size: 14px;
    padding-top: 5px;
    padding-left: 3px;
    line-height: 16px;
    color: #333333;
  }
  .ding {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    > div {
      color: #f84459;
      > span {
        font-size: 18px;
        font-weight: 549;
      }
    }
    > span {
      height: 20px;
      width: 60px;
      font-size: 12px;
      display: inline-block;
      background-color: #f63459;
      color: #fff;
      text-align: center;
      line-height: 20px;
    }
  }
}
</style>
